.wp-code-snippet {
    --text: var(--code-snippet-text, #{$blue-60});
    --border: var(--code-snippet-border, #{$blue-20});

    --background: var(--code-snippet-background, #{$gray-10});
    --background-light: var(--code-snippet-background-light, #{$white});

    --button: var(--code-snippet-button, #{$blue-60});
    --button-hover: var(--code-snippet-button-hover, #{$blue-90});
    --button-active: var(--code-snippet-button-active, #{$blue-100});

    margin-bottom: 32px;
    font-size: 12px;
    line-height: calc(16 / 12);
    display: flex;
    align-items: stretch;

    background-color: var(--background);
    padding: 16px 24px;
    border: 1px solid var(--border);
    color: var(--text);

    pre {
        margin: 0;
        flex: 1;
    }

    .wp-code-snippet__code {
        font-family: $monospace-font-stack;
        font-feature-settings: "liga" 0; // Fix broken "fi" ligature in Menlo.
        word-break: break-word;
    }

    .wp-code-snippet__code--is-truncated {
        display: block;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent);
        height: 48px;
    }

    button.code-copy-button {
        position: relative;
        background: none;
        border: none;
        flex: 0 0 64px;
        max-height: 32px;
        text-align: right;
        color: var(--button);
        cursor: pointer;

        &::before {
            content: "";
            position: absolute;
            top: -16px;
            left: 0;
            width: calc(100% + 24px);
            height: calc(100% + 32px);
        }

        &:hover {
            color: var(--button-hover);
        }

        &:active {
            color: var(--button-active);
        }

        &.code-copy-button--has-copied {
            pointer-events: none;
        }
    }
}

.wp-code-snippet--light {
    background-color: var(--background-light);
}
